hast-util-from-dom
Advanced tools
The `hast-util-from-dom` package is a utility for converting DOM nodes to HAST (Hypertext Abstract Syntax Tree) nodes. This is particularly useful for working with HTML content in a structured and programmatic way, enabling transformations, analysis, and rendering of HTML content.
Convert DOM to HAST
This feature allows you to convert a DOM node to a HAST node. In this example, we use `jsdom` to create a DOM from an HTML string and then convert a paragraph element to a HAST node.
const { fromDom } = require('hast-util-from-dom');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const dom = new JSDOM('<!DOCTYPE html><p>Hello world</p>');
const hast = fromDom(dom.window.document.querySelector('p'));
console.log(hast);The `rehype-parse` package is used to parse HTML into a HAST tree directly from an HTML string. Unlike `hast-util-from-dom`, which converts existing DOM nodes to HAST, `rehype-parse` works directly with HTML strings and is part of the unified collective of tools for processing content.
hast utility to transform from a DOM tree.
yarn:
yarn add hast-util-from-dom
npm:
npm install hast-util-from-dom
This utility is similar to hast-util-from-parse5, but
is intended for browser use and therefore relies on the native DOM API instead
of an external parsing library.
Say we have the following file, example.html:
<!doctype html><title>Hello!</title><h1 id="world">World!<!--after--><script src="example.js" charset="UTF-8"></script>
Suppose example.js is a bundled version of something like this:
import inspect from 'unist-util-inspect';
import fromDom from 'hast-util-from-dom';
const hast = fromDom(document);
console.log(inspect.noColor(hast));
Viewing example.html in a browser should yield the following in the console:
root[2]
├─ doctype [name="html"]
└─ element[2] [tagName="html"]
├─ element[1] [tagName="head"]
│ └─ element[1] [tagName="title"]
│ └─ text: "Hello!"
└─ element[1] [tagName="body"]
└─ element[3] [tagName="h1"][properties={"id":"world"}]
├─ text: "World!"
├─ comment: "after"
└─ element[0] [tagName="script"][properties={"src":"example.js","charSet":"UTF-8"}]
fromDom(node)Transform a DOM tree to a hast tree.
This works in a similar way to the parse5 version
except that it works directly from the DOM rather than a string of HTML.
Consequently, it does not maintain positional info.
Use of hast-util-from-dom can open you up to a
cross-site scripting (XSS) attack if the DOM is unsafe.
Use hast-util-santize to make the hast tree safe.
hast-util-from-parse5
— Create a hast tree from Parse5’s ASThast-util-sanitize
— Sanitize hast nodeshast-util-to-html
— Create an HTML stringhast-util-to-dom
— Create a DOM tree from a hast treeSee contributing.md in syntax-tree/.github for ways to get
started.
See support.md for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
FAQs
hast utility to create a tree from the DOM
The npm package hast-util-from-dom receives a total of 273,461 weekly downloads. As such, hast-util-from-dom popularity was classified as popular.
We found that hast-util-from-dom demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.